<template>
  <div class="BhfbSearch BhfbSearch-wrap">
    <!-- 此页面病患搜索框 -->
    <div class="layer-search">
      <div class="search-all">全部:</div>
      <el-input v-model="input">
        <i slot="suffix" class="el-input__icon el-icon-close" @click="toClear"></i>
      </el-input>
      <i class="el-icon-search" @click="toSearch"></i>
    </div>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Prop, Emit } from 'vue-property-decorator';
@Component({
  name: 'BhfbSearch',
  components: {}
})
export default class BhfbTree extends Vue {
  private input: any = '';
  // 点击清空文本框
  private toClear() {
    this.input = '';
  }
  // 点击搜索按钮
  private toSearch() {
    // console.log()
  }
}
</script> 
  <style lang="less" scoped>
@import url('../../../assets/css/Layout.less');
.layer-search {
  height: 100%;
  background-color: #dbddde;
  border: 1px solid #000;
  .search-all {
    float: left;
    width: 20%;
    line-height: 40px;
  }
  .el-input {
    height: 30px;
    width: 65%;
    display: inline-block;
  }
  .el-icon-search {
    float: right;
    padding-right: 3%;
    color: #7de5fa;
    line-height: 40px;
  }
}
</style>
	<style lang="less">
.BhfbSearch-wrap {
  .el-input {
    .el-input__inner {
      line-height: 30px;
      margin-top: 5px;
      height: 30px;
      border-radius: 0px;
      background-color: #dbddde;
      border-top: 0px solid #fff;
      border-bottom: 0px solid #fff;
      border-right: 1px solid #ccc;
      border-left: 1px solid #ccc;
    }
  }
}
</style>
 